<template>
  <el-dialog
    v-model="dialogVisible"
    title="宠物资料查看"
    width="60%"
    :with-credentials="true"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <el-form
        :model="form"
        :inline="true"
        label-width="120px"
        class="customClass"
      >
        <el-form-item label="宠物名称">
          <el-input
            v-model="form.petName"
            style="width: 180px"
            disabled
          />
        </el-form-item>

        <el-form-item label="挂失人电话">
          <el-input
            v-model="form.phone"
            style="width: 180px"
            disabled
          />
        </el-form-item>

        <el-form-item label="丢失的位置">
          <el-input
            v-model="form.lossAddress"
            style="width: 180px"
            disabled
          />
        </el-form-item>

        <el-form-item label="宠物的描述">
          <el-input
            v-model="form.remark"
            style="width: 180px"
            disabled
          />
        </el-form-item>

        <el-form-item label="宠物挂失状态" prop="lossStatus">
          <el-radio-group v-model="form.lossStatus" style="width: 180px" disabled>
            <el-radio label=0>丢失中</el-radio>
            <el-radio label=1>已找回</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div style="width: 20%">
        <el-image
          :src="form.pictureUrl"
          fit="cover"
          style="width: 150px; height: 150px"
        ></el-image>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const form = reactive<Record<string, any>>({
  petName: "",
  phone: "",
  lossAddress: "",
  remark: "",
  lossStatus: "",
  pictureUrl: "",
  deleted: "",
  id: "",
});

const dialogVisible = ref(false);

const showDialog = (data: Record<string, any>) => {
  for (let key in data) {
    if (form.hasOwnProperty(key)) {
      form[key] = data[key] + "";
    }
  }
  dialogVisible.value = true;
};

defineExpose({
  showDialog,
});
</script>
<style scoped lang="less">
.dialog-footer .el-button {
  margin-right: 10px;
  margin-top: -20px;
}

.customClass {
  .el-form-item {
    margin-bottom: 30px;
  }
  width: 80%;
}
</style>
